<template>
  <div class="MyInformation">
    <!-- 头部 -->
    <MyHeader :userInfo="userInfo" />
    <div v-if="userInfo.typ==2" class="info">
      <h2>商户名字：{{ merchant.mName }}</h2>
      <p>商户电话：{{ merchant.phone }}</p>
      <p>商户简介： {{ merchant.desc }}</p>
      <p>商户地址： {{ merchant.address }}</p>
    </div>
    <div v-if="userInfo.typ==2" class="HomeActive">
      <van-divider>LOGO</van-divider>
      <img :src="$base.baseImg + merchant.logo" alt="" />
    </div>
    <div v-if="userInfo.typ==2" class="HomeActive">
      <van-divider>营业执照</van-divider>
      <img :src="$base.baseImg + merchant.businessLicense" />
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import MyHeader from "@/components/MyHeader.vue";
import HomeActive from "@/components/HomeActive.vue";
import { Divider } from "vant";

Vue.use(Divider);
@Component({
  components: {
    MyHeader,
    HomeActive,
  },
})
export default class MyInformation extends Vue {
  private userInfo = {};
  private merchant = {};
  private mounted(): void {
    this.$common.getAuthToken(this.getData);
  }
  private getData(): void {
    this.$post(`userInfo`).then((res: any) => {
      if (res.code == 0) {
        this.userInfo = res.data;
        if (res.data.typ == 2) {
          this.$post(`getMerchant`, {
            mid: 0,
          }).then((res: any) => {
            if (res.code == 0) {
              this.merchant = res.data;
            }
          });
        }
      }
    });
  }
}
</script>

<style lang="scss">
.MyInformation {
  width: 100%;
  background-color: #fff;
  .info {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    border-top: 1px solid #f5f5f5;
    h2 {
      font-size: 35px;
      line-height: 1.5;
      color: #333;
    }
    p {
      font-size: 24px;
      line-height: 1.5;
      color: #999;
    }
  }
  .HomeActive {
    width: 100%;
    padding: 30px 30px 0 30px;
    box-sizing: border-box;
    & > img {
      width: 100%;
      max-height: 300px;
      display: block;
    }
  }
}
</style>